import React, { Component } from 'react';
// import logo from '../logo.svg'
import logo from '../images2/z02.gif'
import logo1 from '../images2/z03.gif'
import logo2 from '../images2/z04.gif'
import logo3 from '../images2/z05.gif'
import logo4 from '../images2/z06.gif'
import logo5 from '../images2/z07.gif'
import '../components/Mylist.scss'

class Mylist extends Component {
      constructor(props){
            super(props);
            this.state={
                  currentIndex:0,
                  arr:[
                        {
                              name:'活动专区',
                              list:[
                                    {name:'卸妆',pic:logo},
                                    {name:'洁面/去角质',pic:logo},
                                    {name:'爽肤水/喷雾',pic:logo},
                                    {name:'乳液',pic:logo},
                                    {name:'精华/精油',pic:logo},
                                    {name:'面霜',pic:logo},
                                    {name:'面膜',pic:logo},
                                    {name:'防晒隔离',pic:logo},
                                    {name:'润唇膏/唇膜',pic:logo},
                                    {name:'面部套装',pic:logo},
                                    {name:'其他面部',pic:logo},
                              ]
                        },
                        {
                              name:'品牌',
                              list:[
                                    {name:'卸',pic:logo1},
                                    {name:'洁面/去角质',pic:logo1},
                                    {name:'爽肤水/喷雾',pic:logo1},
                                    {name:'乳液',pic:logo1},
                                    {name:'精华/精油',pic:logo1},
                                    {name:'面霜',pic:logo1},
                                    {name:'面膜',pic:logo1},
                                    {name:'防晒隔离',pic:logo1},
                                    {name:'润唇膏/唇膜',pic:logo1},
                                    {name:'面部套装',pic:logo1},
                                    {name:'其他面部',pic:logo1},
                              ]
                        },
                        {
                              name:'美容护肤',
                              list:[
                                    {name:'卸妆',pic:logo2},
                                    {name:'洁面/去角质',pic:logo2},
                                    {name:'爽肤水/喷雾',pic:logo2},
                                    {name:'乳液',pic:logo2},
                                    {name:'精华/精油',pic:logo2},
                                    {name:'面霜',pic:logo2},
                                    {name:'面膜',pic:logo2},
                                    {name:'防晒隔离',pic:logo2},
                                    {name:'润唇膏/唇膜',pic:logo2},
                                    {name:'面部套装',pic:logo2},
                                    {name:'其他面部',pic:logo2},
                              ]
                        },
                        {
                              name:'彩妆',
                              list:[
                                    {name:'卸妆',pic:logo3},
                                    {name:'洁面/去角质',pic:logo3},
                                    {name:'爽肤水/喷雾',pic:logo3},
                                    {name:'乳液',pic:logo3},
                                    {name:'精华/精油',pic:logo3},
                                    {name:'面霜',pic:logo3},
                                    {name:'面膜',pic:logo3},
                                    {name:'防晒隔离',pic:logo3},
                                    {name:'润唇膏/唇膜',pic:logo3},
                                    {name:'面部套装',pic:logo3},
                                    {name:'其他面部',pic:logo3},
                              ]
                        },
                        {
                              name:'香水',
                              list:[
                                    {name:'卸妆',pic:logo4},
                                    {name:'洁面/去角质',pic:logo4},
                                    {name:'爽肤水/喷雾',pic:logo4},
                                    {name:'乳液',pic:logo4},
                                    {name:'精华/精油',pic:logo4},
                                    {name:'面霜',pic:logo4},
                                    {name:'面膜',pic:logo4},
                                    {name:'防晒隔离',pic:logo4},
                                    {name:'润唇膏/唇膜',pic:logo4},
                                    {name:'面部套装',pic:logo4},
                                    {name:'其他面部',pic:logo4},
                              ]
                        },
                        {
                              name:'酒类',
                              list:[
                                    {name:'卸妆',pic:logo5},
                                    {name:'洁面/去角质',pic:logo5},
                                    {name:'爽肤水/喷雾',pic:logo5},
                                    {name:'乳液',pic:logo5},
                                    {name:'精华/精油',pic:logo5},
                                    {name:'面霜',pic:logo5},
                                    {name:'面膜',pic:logo5},
                                    {name:'防晒隔离',pic:logo5},
                                    {name:'润唇膏/唇膜',pic:logo5},
                                    {name:'面部套装',pic:logo5},
                                    {name:'其他面部',pic:logo5},
                              ]
                        },
                        {
                              name:'腕表首饰',
                              list:[
                                    {name:'卸妆',pic:logo1},
                                    {name:'洁面/去角质',pic:logo1},
                                    {name:'爽肤水/喷雾',pic:logo1},
                                    {name:'乳液',pic:logo1},
                                    {name:'精华/精油',pic:logo1},
                                    {name:'面霜',pic:logo1},
                                    {name:'面膜',pic:logo1},
                                    {name:'防晒隔离',pic:logo1},
                                    {name:'润唇膏/唇膜',pic:logo1},
                                    {name:'面部套装',pic:logo1},
                                    {name:'其他面部',pic:logo1},
                              ]
                        },
                        {
                              name:'服饰箱包',
                              list:[
                                    {name:'卸妆',pic:logo2},
                                    {name:'洁面/去角质',pic:logo2},
                                    {name:'爽肤水/喷雾',pic:logo2},
                                    {name:'乳液',pic:logo2},
                                    {name:'精华/精油',pic:logo2},
                                    {name:'面霜',pic:logo2},
                                    {name:'面膜',pic:logo2},
                                    {name:'防晒隔离',pic:logo2},
                                    {name:'润唇膏/唇膜',pic:logo2},
                                    {name:'面部套装',pic:logo2},
                                    {name:'其他面部',pic:logo2},
                              ]
                        },
                        {
                              name:'食品保健',
                              list:[
                                    {name:'卸妆',pic:logo3},
                                    {name:'洁面/去角质',pic:logo3},
                                    {name:'爽肤水/喷雾',pic:logo3},
                                    {name:'乳液',pic:logo3},
                                    {name:'精华/精油',pic:logo3},
                                    {name:'面霜',pic:logo3},
                                    {name:'面膜',pic:logo3},
                                    {name:'防晒隔离',pic:logo3},
                                    {name:'润唇膏/唇膜',pic:logo3},
                                    {name:'面部套装',pic:logo3},
                                    {name:'其他面部',pic:logo3},
                              ]
                        }
                  ]
            }

            this.handleClick.bind(this)
      }

      handleClick(index){
            this.setState({
                  currentIndex:index
            },()=>{
                  console.log(this.state.currentIndex)
            })
      }
      render() {
            return (
                  <>
                  <div className='fenlei'>分类</div>
                  <input type="text" placeholder='搜索店铺内商品'/>
                  <div className='mylist'>
                        <div className='left'>
                             {
                              this.state.arr.map((item,index)=>{
                                    return(
                                    <div key={index} className="btn" style={{color:this.state.currentIndex==index?'red':'',backgroundColor:this.state.currentIndex==index?'gray':''}}onClick={()=>{
                                          this.handleClick(index)
                                    }}>{item.name}</div>   
                                    )
                              })
                             }
                        </div>
                        <div className='right'>
                              {
                                    this.state.arr[this.state.currentIndex].list.map((item,index)=>{
                                          return(
                                                <div key={index} className="item">
                                                      <img src={item.pic} alt="" />
                                                      <div className='name'>{item.name}</div>
                                                </div>
                                          )
                                    })
                              }

                        </div>
                  </div></>
            );
      }
}
var list = ["a", "b", "c", "d"]; // "a-b-c-d"
var result = list.join("-");     //"a-b-c-d"
var result = list.join("/");     //"a/b/c/d"
var result = list.join("");      //"abcd"
var result = list.join();        //  a,b,c,d
console.log(result);




export default Mylist;